阮家圳的博客

中文

English

中文

English

Appearance

学习周报-2025-01-26 ​

vue方法中丢失属性的问题 ​

vue方法中属性丢失的问题【渡一教育】_哔哩哔哩_bilibili

在初始化时，vue文件中定义的方法会被通过.bind()方法绑定到实例上，这个过程会导致方法的属性丢失。

要解决这个问题，需要将方法定义在data中。

Git不跟踪文件名大小写变化 ​

git大小写规则造成的问题【渡一教育】_哔哩哔哩_bilibili

使用以下命令关闭git的大小写忽略：

bash
git config core.ignorecase false

如何封装组件 ​

如何封装组件【渡一教育】_哔哩哔哩_bilibili 遵循以下步骤进行组件的设计和实现：

  1. 确定动机。即确定组件要解决的问题，以及其应用范围。
  2. 分析边界。组件越通用，边界越窄，灵活性越差，越不方便。
  3. 设计接口。包括属性、插槽和事件。并输出文档。
  4. 代码实现。
  5. 测试。包括单元测试、集成测试。
  6. 维护。

鼠标移动的高亮边框效果 ​

鼠标移动的高亮边框效果【渡一教育】_哔哩哔哩_bilibiliThe highlight effect of the border follow mouse

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
  </head>
  <body>
    <div class="grid">
      <div class="card">
        <div class="inner">inner-content</div>
      </div>
      <div class="card">
        <div class="inner">inner-content</div>
      </div>
      <div class="card">
        <div class="inner">inner-content</div>
      </div>
      <div class="card">
        <div class="inner">inner-content</div>
      </div>
      <div class="card">
        <div class="inner">inner-content</div>
      </div>
      <div class="card">
        <div class="inner">inner-content</div>
      </div>
    </div>
  </body>
  <script>
    const gridContainer = document.querySelector('.grid');
    const cards = document.querySelectorAll('.card');

    window.addEventListener('mousemove', (e) => {
      const mouseX = e.clientX;
      const mouseY = e.clientY;

      cards.forEach((card) => {
        const rect = card.getBoundingClientRect();
        const x = mouseX - rect.left - rect.width / 2;
        const y = mouseY - rect.top - rect.height / 2;

        card.style.setProperty('--x', `${x}px`);
        card.style.setProperty('--y', `${y}px`);
      });
    });
  </script>
  <style>
    body {
      background-color: #000;
    }

    .grid {
      margin: 0 auto;
      width: 1000px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .card {
      width: 300px;
      height: 300px;
      background-color: rgba(255, 255, 255, 0.2);
      position: relative;
      overflow: hidden;
      border-radius: 10px;
    }

    .card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(closest-side circle, #fff 0%, #0000 100%);
      transform: translate(var(--x, -10000px), var(--y, -10000px));
    }

    .inner {
      position: absolute;
      inset: 3px;
      border-radius: inherit;
      background-color: #222;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      color: #fff;
    }
  </style>
</html>

并发任务执行器 ​

并发任务控制【渡一教育】_哔哩哔哩_bilibili

一个可以控制并发任务数量的任务执行器类：

ts
class ConcurrentTaskRunner {
  private tasks: {
    task: () => any;
    resolve: (value?: any) => void;
    reject: (reason?: any) => void;
  }[] = [];
  private runningTasks = 0;

  constructor(private maxConcurrentTasks: number) {
    this.maxConcurrentTasks = maxConcurrentTasks;
  }

  add(task: () => any) {
    return new Promise((resolve, reject) => {
      this.tasks.push({
        task,
        resolve,
        reject,
      });
      this.#run();
    });
  }

  #run() {
    while (
      this.runningTasks < this.maxConcurrentTasks &&
      this.tasks.length > 0
    ) {
      const { task, resolve, reject } = this.tasks.shift() || {};
      if (task) {
        this.runningTasks++;
        Promise.resolve(task())
          .then(resolve, reject)
          .finally(() => {
            this.runningTasks--;
            this.#run();
          });
      }
    }
  }
}

const taskRunner = new ConcurrentTaskRunner(2);

const addTask = (time: number, name: string) => {
  return taskRunner.add(() => {
    taskRunner.add(() => {
      return new Promise<void>((resolve) => {
        setTimeout(() => {
          console.log(
            `Task ${name} finished`,
            'time :',
            time,
            new Date().toLocaleString(),
          );
          resolve();
        }, time);
      });
    });
  });
};

addTask(1000, 'A'); // Task A finished time : 1000 2025/1/25 19:25:12
addTask(1000, 'B'); // Task B finished time : 1000 2025/1/25 19:25:12
addTask(1000, 'C'); // Task C finished time : 1000 2025/1/25 19:25:13
addTask(1000, 'D'); // Task D finished time : 1000 2025/1/25 19:25:13
addTask(1000, 'E'); // Task E finished time : 1000 2025/1/25 19:25:14